<template>
  <div class="app" @mousemove="mouseMove">
    <h2>鼠标在当前元素内的x轴坐标--{{ mouseX }}</h2>
    <h2>鼠标在当前元素内的y轴坐标--{{ mouseY }}</h2>
    <button @click="getDog">点击加载图片</button>
    <img width="300" :src="dogUrl" alt="" />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "App",
  });
</script>
<script lang="ts" setup>
  import axios from "axios";
  import { onMounted, ref } from "vue";
  //1.鼠标移动打印坐标的效果
  const mouseX = ref(0);
  const mouseY = ref(0);
  const mouseMove = (e: MouseEvent) => {
    mouseX.value = e.clientX;
    mouseY.value = e.clientY;
  };
  onMounted(() => {
    console.log("鼠标位置初始化");
  });

  //2.点击加载狗的图片
  const dogUrl = ref("");
  const getDog = async () => {
    const result = await axios.get("https://dog.ceo/api/breeds/image/random");
    dogUrl.value = result.data.message;
  };
  onMounted(() => {
    console.log("dog图片初始化");
  });
</script>

<style lang="scss" scoped>
  .app {
    width: 100%;
    height: 500px;
    border: 1px solid #000;
  }
</style>
